<template>
  <div class="main-box">
    <!--确认订单框-->
    <div>
        <a-modal v-model:visible="visible" width="1200px" title="确认信息" :footer='null'>
            <Comfirm/>
        </a-modal>
    </div>
    <el-row justify="center">
        <el-col :span="18">
            <!-- 商品展示 -->
            <el-row class="listOne">
                <!--图片展示区-->
                <el-col :span="10" class="show-img">
                    <img :src="bigImg" class="big-img">
                    <ul>
                        <li v-for="(item,index) in data.details.smallPic" 
                        :key="index"
                        :class="{choose1:chooseIndex==index}"
                        @click="changeImg(index)"
                        >
                            <img :src="item.path">
                        </li>
                    </ul>
                </el-col>
                <!--文字介绍区-->
                <el-col :span="14" class="introduce">
                    <div>
                        <h1>{{ data.name }}</h1>
                        <h2>指导价：{{ data.details.price }}</h2>
                        <h3>车型：{{ data.details.carSize }}</h3>
                        <h3>{{ data.details.comefrom }}</h3>
                    </div>
                    <div class="buttons">
                        <div class="btn1" @click="btn1">立即购买</div>
                        <div class="btn2" @click="btn2">加入购物车</div>
                    </div>
                </el-col>
            </el-row>
            <!-- 商品大图 -->
            <el-row class="bg-pic">
                <div v-for="(item,index) in data.details.bgPic" :key="index">
                    <img :src="item.path">
                </div>
            </el-row>
        </el-col>
    </el-row>
    <Footer/>
  </div>
</template>

<script>
import { ref } from 'vue'
import Footer from '../views/Footer.vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import Comfirm from '../views/Comfirm.vue'
import EventBus from '../until/EventBus'
import { useStore } from 'vuex'

export default {
  components:{
    Footer,
    Comfirm
  },
  name: '',
  setup() {
    const router = useRouter()
    const store = useStore()
    //获取令牌
    const token = ref()
    token.value = sessionStorage.token

    //获取数据
    const data = ref({})
    const getData = ()=>{
        data.value =JSON.parse(sessionStorage.data1) 
    }
    getData()
    
    //展示的大图
    const bigImg = ref()
    bigImg.value = data.value.details.smallPic[0].path
    
    //切换图片
    const chooseIndex =ref(0)
    const changeImg = (index)=>{
        chooseIndex.value=index
        bigImg.value=data.value.details.smallPic[index].path
    }

    //存储选中的数据
    const saveData = ref({})
    const getSaveData = ()=>{
        saveData.value.flagNumber = sessionStorage.token
        saveData.value.name = data.value.name
        saveData.value.price = data.value.details.price
        saveData.value.path = bigImg.value
        saveData.value.settime = new Date()
        saveData.value.count = 1
        saveData.value.addres = '重庆市巴南区'
        saveData.value.isChecked = false
        saveData.value.carSize = data.value.details.carSize
        saveData.value.comefrom = data.value.details.comefrom
    }

    //后买确认弹框
    const visible = ref(false)

    //购买按钮
    const btn1 = ()=>{
        if(token.value==null){
            ElMessage('请登录')
            router.push('/login')
        }else{
            getSaveData()
            //传值给状态管理
            store.commit('buyInfo',saveData.value)
            //打开弹框
            visible.value = true
        }  
    }

    //监听事件总线
    EventBus.on('visible3',(data)=>{
        visible.value = data
    })

    //购物车按钮
    const btn2 = ()=>{
        if(token.value==null){
            ElMessage('请登录')
            router.push('/login')
        }else{
            getSaveData()
            //将选择的数据写入json-serve
            axios.post('http://localhost:3000/shopcar',saveData.value).then(res=>{
                ElMessage('加入成功')
            })
        }
    }

    return {
        data,bigImg,chooseIndex,changeImg,visible,btn1,btn2
    }
  }
}

</script>
<style scoped lang='scss'>
    .listOne{
        *{
            box-sizing: border-box;
        }
        border: 1px #303133 solid;
        margin: 10px 0;
        padding: 5px;
        .show-img{
            .big-img{
                width: 100%;
                border: 1px rgb(216, 216, 216) solid;
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                padding-top: 5px;
                li{
                    list-style: none;
                    width: 24%;
                    border: 1px rgb(216, 216, 216) solid;
                    margin: 2px;
                    cursor: pointer;
                    img{
                        width: 100%;
                        border: none;
                    }
                }
                .choose1{
                        border: 1px #303133 solid;
                }
            }
        }
        .introduce{
            *{margin: 0;padding: 0;}
            padding: 10px;
            h1{
                font-size: 3em;
            }
            h2{
                font-size: 2.5em;
            }
            h3{
                font-size: 1.5em;
                font-weight: 550;
            }
            .buttons{
                display: flex;
                justify-content: center;
                .btn1,.btn2{
                    width: 25%;
                    border: 1px #303133 solid;
                    padding: 0.5em;
                    text-align: center;
                    font-size: 1.2em;
                    letter-spacing: 0.2em;
                    cursor: pointer;
                    margin: 0 5px;
                }
                .btn1{
                    background-color: #303133;
                    color: white;
                }
                .btn2{
                    color:#303133 ;
                }
                &:hover{
                    opacity: 0.9;
                }
            }
        }
    }
    .bg-pic{
        width: 100%;
        img{
            width: 100%;
        }
    }
    
    
</style>